<template>
  <div class="app-container">
    <!--高级查询-->
    <div class="filter_container">
      <div class="filter_row">
        <el-form ref="form" :model="params" :inline="true" label-width="80px" size="mini">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="发货人：">
                <el-input v-model="params.custNm" @keyup.enter.native="handleFilter" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="承运人：">
                <el-input v-model="params.carrierNm" @keyup.enter.native="handleFilter" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--操作按钮-->
    <div class="operation_container">
      <ul>
        <li><el-button v-waves type="primary" icon="el-icon-search" size="mini" @click="handleFilter">查询</el-button></li>
        <li><el-button v-waves type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAdd()">新增</el-button></li>
      </ul>
    </div>
    <!--栅格-->
    <div class="grid_container">
      <el-table
        ref="singleTable"
        v-loading="grid.loading"
        :data="page.rows"
        element-loading-text="Loading"
        border
        stripe
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="费率类型" align="center" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.saleBuyType | saleBuyTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运单类型" align="center" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.surviceType | surviceTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="路线类型" align="center" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.routeDistanceType | routeDistanceTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="custNm" label="发货人" align="center" show-overflow-tooltip />
        <el-table-column prop="carrierNm" label="承运人" align="center" show-overflow-tooltip />
        <el-table-column prop="arrAreaCdTreeNames" label="出发地" align="center" show-overflow-tooltip />
        <el-table-column prop="arrAreaCdTreeNames" label="到货地" align="center" show-overflow-tooltip />
        <el-table-column label="结费类型" align="center" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeAdjustType | chargeAdjustTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="minAmt" label="最低价" align="center" show-overflow-tooltip />
        <el-table-column prop="maxAmt" label="最高价" align="center" show-overflow-tooltip />
        <el-table-column prop="basicAmt" label="金额" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-dropdown type="text" split-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-delete-solid" divided @click.native="handleRemove(scope.row)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div>
      <el-pagination
        v-show="page.total > 0"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        :total="page.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConfig from '@/config/AppConfig'
import appConstant from '@/constant/AppConstant'
import RoutePriceNewApi from '@/api/basic/RoutePriceNewApi'

export default {
  directives: {
    waves
  },
  filters: {
    saleBuyTypeFilter(item) {
      const values = appConstant.saleBuyTypeList.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    },
    surviceTypeFilter(item) {
      const values = appConstant.freightOrderTypeList.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    },
    routeDistanceTypeFilter(item) {
      const values = appConstant.routeDistanceTypeList.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    },
    chargeAdjustTypeFilter(item) {
      const values = appConstant.chargeAdjustTypeList.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      selects: {
        validStatusList: appConstant.validStatusList
      },
      params: {},
      page: {
        currentPage: appConfig.page.currentPage,
        pageSize: appConfig.page.pageSize,
        pageSizes: appConfig.page.pageSizes,
        total: null,
        rows: null
      },
      grid: {
        loading: true
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 加载grid数据
      this.grid.loading = true
      RoutePriceNewApi.page(this.params, this.page).then(response => {
        this.page.total = response.data.total
        this.page.rows = response.data.rows
        this.grid.loading = false
      }, () => {
        this.grid.loading = false
      })
    },
    handleConfig() {
      this.openConfigDialog()
    },
    handleAdd() {
      this.$router.push({ path: '/basic/routePriceNew/form' })
    },
    handleRemove(row) {
      // this.$confirm('确定删除当前数据吗？', '确定删除', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   RoutePriceNewApi.remove(row.id).then(response => {
      //     this.$message.success('删除成功')
      //     this.loadData()
      //   })
      // }).catch(() => {
      //   this.$message.info('已取消')
      // })
    },
    handleEdit(row) {
      this.$router.push({ path: '/basic/routePriceNew/form/' + row.id })
    },
    handleFilter() {
      this.page.currentPage = appConfig.page.currentPage
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.loadData()
    },
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage
      this.loadData()
    }
  }
}
</script>
